<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ表单练习</title>
    <style>
        body{
            background-color:#ccc;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
        }
        .big-div{
            background-color:#fff;
            height: 600px;
            width: 400px;
            padding: 5px;
            border-radius: 10px;
            margin:50px auto;
            overflow-y: auto;
        }
        .inner-div{
            margin: 0 auto;
            width: 300px;
            margin-top: 20px;
        }
        .input1 span{
            display:inline-block;
            font-size:14px;
            font-weight: bold;
            max-width: 100%;
        }
        .input1 input{
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 4px;
        }
        .input1 button{
            display: inline-block;
            padding: 6px 12px;
            color: #fff;
            background-color: #d9534f;
            border-color: #d43f3a;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .input1 button:hover{
            background-color:#C9302C;
            color:#fff;
        }
        .input2 span{
            display:inline-block;
            font-size:14px;
            font-weight: bold;
        }
        .input2 input{
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .input2 button{
            display: inline-block;
            padding: 6px 12px;
            color: #fff;
            background-color: #d9534f;
            border-color: #d43f3a;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .input2 button:hover{
            background-color:#C9302C;
            color:#fff;
        }
        #blueButton{
            color: #fff;
            background-color: #337AB7;
            border-color: #204d74;
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            float: right;
            width: 310px;
            margin-top: 20px;
            border: 1px solid transparent;
            border-radius:6px;
            cursor:pointer;
            line-height: 1.42857143;
        }
        #blueButton:hover{
            background-color:#204d74;
            color:#fff;
        }
        .clear{
            clear:both;
        }
        hr{
            margin-top: 20px;
            margin-bottom: 20px;
            border: 0;
            border-top: 1px solid #eee;
        }
        .disableList{
            width: 310px;
            margin: 0 auto;
            margin-top: 30px;
            height: 197px;
        }
        .disBtn{
            position: relative;
            top: -10px;
            font-size: 17px;
        }
        .dischk{
            width: 60px;
            height: 30px;
            display: inline-block;
            border-radius: 30px;
            position: relative;
            background-color:#ccc;
        }
        #disableAll{
            position: absolute;
            z-index: 9;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .Nameinput[disabled]{
           background-color:#eee;
       }

        .dischk i{
            display: block;
            height: 28px;
            width: 28px;
            background-color: #fff;
            border-radius: 14px;
            position: absolute;
            right: 31px;
            top: 1px;
            transition: left 0.1s;
            z-index: 8
        }
       .innerBot1{
          margin-bottom: 5px !important;
          position: relative;
       }
       .innerBot1{
            display: inline-block;
            margin-bottom: 5px;
            font-weight: bold;
            max-width: 100%;
       }
       .Nameinput{
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
       }
       .orangeBtn{
            display: inline-block;
            vertical-align: middle;
            position: relative;
            top: 2px;
       }
       .orangeSpan,.orangeSpan .bg{
            width: 60px;
            height: 30px;
            display: inline-block;
            border-radius: 30px;
            position: relative;
            background-color:#ccc;
           
       }
        .orangeSpan .bg{
           background-color:#ccc;
        }
       .orangeSpan input[type=checkbox]{
          position: absolute;
          z-index: 9;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: pointer;
       }
       .orangeSpan .bg{
        background-color:#ccc;
       }
       .orangeSpan i{
            display: block;
            height: 28px;
            width: 28px;
            background-color: #fff;
            border-radius: 14px;
            position: absolute;
            top: 1px;
            transition: left 0.1s;
            z-index: 8;
            right: 31px;
       }
      .EmailSpan{
            display: inline-block;
            margin-bottom: 5px;
            font-weight: bold;
            max-width: 100%;
            margin-left: 3px;
       }
        .TelSpan{
            display: inline-block;
            margin-bottom: 5px;
            font-weight: bold;
            max-width: 100%;
       }
       .innerBot3{
            display: inline-block;
            margin-left: 17px;
            margin-top: 4px;
       }
      .DescSpan{
            display: inline-block;
            margin-bottom: 5px;
            font-weight: bold;
            max-width: 100%;
       }
       .innerBot4{
            display: inline-block;
            margin-top: 4px;
       }
       .orangeSpan input[type=checkbox]:checked + i {
           left: 31px;
       }
       .orangeSpan input[type=checkbox]:checked ~ .bg{
           background-color:orange;
       }
       



    
    </style>
</head>
<body>
      <div class="big-div">
          <div class="inner-div">
              <form id="modForm">
                  <div class="input1">
                      <span style="margin-right:5px">模块</span>
                      <input type="text" placeholder="module name" style="margin-right:4px">
                      <button class="deleteBtn">删除</button>
                  </div>
                  <div class="input2">
                      <span style="margin-right:5px">模块</span>
                      <input type="text" placeholder="module name" style="margin-right:4px">
                      <button class="deleteBtn">删除</button><!-- (让button的class和未来元素的class保持一致) -->
                  </div>
              </form>
              <button id="blueButton">增加模块</button>
              <div class="clear"></div>
          </div>
          <hr>
          <div class="disableList">
              <div>
                  <span class="disBtn">是否全部禁用:</span>
                  <span class="orangeSpan">
                      <input id="disableAll" type="checkbox">
                      <i></i>
                      <span class="bg"></span>
                  </span>
              </div>
              <form id="innerBottom">
                  <div class="innerBot1">
                      <label>Name</label>
                      <input type="text" class="Nameinput" placeholder="Name~">
                      <div class="orangeBtn">
                            <span class="orangeSpan">
                                <input type="checkbox"checked="true">
                                <i></i>
                                <span class="bg"></span>
                            </span>
                      </div>
                  </div>
   <!-- //////////////////////////////////////////////////////////////////////////////////  -->  
                <div class="innerBot1">
                      <label class="EmailSpan">Email</label>
                      <input type="text" class="Nameinput" placeholder="Email~">
                      <div class="orangeBtn">
                            <span class="orangeSpan">
                                <input type="checkbox"checked="true">
                                <i></i>
                                <span class="bg"></span>
                            </span>
                      </div>
                  </div>
 <!-- //////////////////////////////////////////////////////////////////////////////////  -->  
                 <div class="innerBot1">
                      <label class="TelSpan">Tel</label>
                      <input type="text" class="Nameinput" placeholder="Tel~">
                      <div class="orangeBtn">
                            <span class="orangeSpan">
                                <input type="checkbox"checked="true">
                                <i></i>
                                <span class="bg"></span>
                            </span>
                      </div>
                  </div>
<!-- //////////////////////////////////////////////////////////////////////////////////  --> 
                <div class="innerBot1">
                      <label class="DescSpan">Desc</label>
                      <input type="text" class="Nameinput" placeholder="desc~">
                      <div class="orangeBtn">
                            <span class="orangeSpan">
                                <input type="checkbox"checked="true">
                                <i></i>
                                <span class="bg"></span>
                            </span>
                      </div>
                  </div>
              </form>
          </div>
      </div>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////    --> 
        <script src="jquery-1.12.0.js"></script> 
        <script>
            var $btnList=$('.orangeBtn').find('input[type=checkbox]');//(选中橘黄色每一项按钮)
            varmodlArr=[ '<div class="input1">',
                          '<span style="margin-right:8px">模块</span>',
                          '<input type="text" placeholder="module name" style="margin:2px 1px">',
                          '<button class="deleteBtn" style="margin-left:8px">删除</button>',
                         '</div>'
                  ]
            // 增加模块
            $('#blueButton').on('click',function(){
                $('#modForm').append(varmodlArr.join(''));
                if($('#modForm').find('div.input1').length>0){
                    $('#modForm').find('p.infop').remove();
                };
            });
            //删除模块
            //未来元素绑事件(先找到父元素)
            $('#modForm').on('click','.deleteBtn',function(){
                var $this=$(this);//(dom对象变jq对象，点击的这个) 
                $this.parent().remove();//(获得父元素)
                // (if判断：当div的长度为0的时候，让它添加模块的字样)
                
                if($('#modForm').find('div.input1').length==0){
                   $('#modForm').html('<p class="infop">请添加模块哦~~~~</p>');  
            };
            });
//////////////////////////////////////////////////////////////////////////////////////////
           //全部禁用的button
           $('#disableAll').on('click',function(){
                  var $this=$(this);
                  var $common1= $('#innerBottom').find('input.Nameinput').val('')
                  // (val没有的就得，有就设置 清空的值为空 禁用使用disabled 加属性attr 如果两个元素id相同只能拿到第一个。)
                  if($this.is(':checked')){
                     $common1.attr('disabled','disabled');
                     $btnList.prop('checked',false).attr('disabled','disabled');
                  } else{
                     $common1.removeAttr('disabled','disabled');
                     $btnList.prop('checked',true).removeAttr('disabled','disabled');

                  }
           });
           //每一项的button
               $btnList.on('click',function(){
                 var $this=$(this);
                 var $common2 =$this.parents('.innerBot1').find('input.Nameinput').val('')
                 if ($this.is(':checked')){
                     $common2.removeAttr('disabled','disabled');
                 }else{
                     $common2.attr('disabled','disabled');
                 };
                   if($('.orangeBtn').find('input[type=checkbox]:checked').length<1){
                      $('#disableAll').prop('checked',true)

                   } else{
                      $('#disableAll').prop('checked',false)
                   }

               });
          </script>
</body>
</html>